跳到主要内容

SpriteIcon 组件

介绍​

精灵图图标组件

用法​

基本引入​

// 1. 引入
import {
  FQSpriteIcon,
  FQSpriteIconProps,
  SpriteIconProps,
} from "@fq/fq-weapp-ui";

基础封装​

// 1. 引入精灵图配置
import { coordinates } from '../../../sprites/outputs/icons/coordinates';

const coordinatesFilesData = {
  icons: coordinates,
};

// 2. 结合精灵图使用
const SpriteIconContainer = ({
  coordinatesFiles,
  module,
  name,
  size = 0,
  width,
  height,
  className,
  style,
  onClick,
}: FQSpriteIconProps) => (
  <FQSpriteIcon
    coordinatesFiles={coordinatesFiles}
    name={name}
    size={size}
    width={width}
    height={height}
    className={className}
    style={style}
    onClick={onClick}
    module={module}
  />
);

const SpriteIcon = ({
  module = "icons",
  name,
  size = 0,
  width,
  height,
  className,
  style,
  onClick,
}: SpriteIconProps<typeof coordinatesFilesData>) => (
  <SpriteIconContainer
    coordinatesFiles={coordinatesFilesData}
    {...{ name, size, width, height, className, style, onClick, module }}
  />
);

基础用法​

import { SpriteIcon } from "@/component/SpriteIcon";

<SpriteIcon width={28} height={28} name={"global-delete"} />

项目调取​

width、height宽高不等

<SpriteIcon width={x} height={x} name={'xx'} />

项目调取，size​

宽高相等

<SpriteIcon size={2} name={'xx'} />

API​

属性​

参数说明类型默认值
coordinatesFiles图标坐标文件Record<string, any>-
module图标模块名string'icons'
name要显示的图标名称string-
size图标的大小number0
width图标的宽度number | undefined-
height图标的高度number | undefined-
className自定义类名string-
style自定义样式string | React.CSSProperties | undefined-

方法​

函数名说明参数
onClick点击时触发-